<template>
  <div class="h-100" data-flex="dir:top box:first" v-loading="init">
    <template v-if="!init">
      <nav-view data-flex-box="0"></nav-view>
      <div data-flex="" class="h-100" data-flex-box="1">
        <div data-flex="" data-flex-box="0"><menu-view/></div>
        <div data-flex-box="0" data-flex="cross:center" @click="toggleMenu" class="cp arrow">
          <os-icon name="arrow" size="12" :rotate="menuExpand ? 180 : 0"></os-icon>
        </div>
        <div data-flex="dir:top" data-flex-box="1" class="ov-h">
          <tabs-view data-flex-box="1"></tabs-view>
          <os-dialog ref="osDialog"></os-dialog>
        </div>
      </div>
    </template>
  </div>
</template>
<script>
import MenuView from './fragment/MenuView.vue'
import NavView from './fragment/NavView.vue'
import TabsView from './fragment/TabsView.vue'
import { mapState } from 'vuex'

export default {
  components: { MenuView, NavView, TabsView },
  data () {
    return {
      init: false
    }
  },
  computed: {
    ...mapState(['menuExpand'])
  },
  watch: {
    $route: {
      handler (val, old = {}) {
        if (val.fullPath !== old.fullPath) {
          this.$tab.add(val.fullPath)
        }
      }
    }
  },
  async created () {
    this.init = true
    await this.initData()
    // 第一次进入的页面如果不是首页，需要手动触发添加tab的方法
    if (this.$route.path !== '/') {
      this.$tab.add(this.$route.fullPath)
    }
    this.init = false
    // 使用者传入了afterCreated的时候,此时执行
    if (this.$config.afterCreated) {
      this.$config.afterCreated({ store: this.$store, router: this.$router })
    }
  },
  methods: {
    initData () {
      // 需要初始化的数据放在promise数组
      const ps = [
        this.$store.dispatch(this.$config?.actions?.userInfo || 'getUserInfo') // 用户信息
      ]
      // 使用者传入了beforeCreated的时候，加到promise里面一起执行
      if (this.$config.beforeCreated) {
        ps.push(this.$config.beforeCreated({ store: this.$store, router: this.$router }))
      }
      return Promise.all(ps).then(res => {
        if (res[0] && res[0].data) {
          this.$store.commit('updateUserInfo', res[0].data)
        }
      })
    },
    toggleMenu () {
      this.$store.commit('update', { menuExpand: !this.menuExpand })
    }
  }
}
</script>
<style lang="scss" scoped>
  .arrow{
    width: 12px;
  }
</style>
